<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
    <script src="./lib/babel.min.js"></script>
</head>
<body>
<div id="root">

</div>

</body>
<script type="text/babel">
    const root = ReactDOM.createRoot(document.querySelector("#root"));
    // 1- React组件分为类组件和函数组件
    // 2- 类组件中拥有状态的。所以类组件也被称为状态组件（复杂组件）
    // 3- 如何学好状态
    //   1- 状态是干嘛的？答：状态即是数据，可以在React当中以修改状态的形式来驱动视图的改变
    //   2- 状态如何去创建？
    //   3- 状态如何去修改？
    class App extends React.Component{
        num=100;
        // 1- 声明了状态，状态包括数据username,age,值分别为zhangsan 12
        state = {
            username:"zhangsan",
            age:12
        }
        constructor() {
            super();
            // 2- 声明状态
            // this.state = {
            //     username:"lisi",
            //     // age:100
            // }
            // console.log(this.state);
            this.state.username = "lisi";//
        }
        render(){
            return (
                <div>
                    <h3>App</h3>
                    <button onClick={()=>{
                        this.num+=1;
                        console.log(this.num)
                    }}>{this.num}</button>
                    <hr/>
                    <button onClick={()=>{
                        // 修改状态的唯一正途是通过this.setState
                        this.setState({
                            // 要修改名字为username的状态值。
                            username:this.state.username+"!",
                            age:this.state.age+1
                        })
                    }}>{this.state.username}-{this.state.age}</button>
                </div>
            )
        }
    }
    root.render(<App/>)

</script>
</html>